<template>
  <div class="chart-warper">
    <div>
      <chart class="chart" :options="options" :auto-resize="true"></chart>
    </div>
  </div>
</template>

<script>
    let lineStyle = {
      normal: {
        width: 1,
        opacity: 0.5
      }
    };
    var dataBJ = [
      [55,9,56,0.46,18,6,1],
      [25,11,21,0.65,34,9,2],
      [56,7,63,0.3,14,5,3],
      [33,7,29,0.33,16,6,4],
      [42,24,44,0.76,40,16,5],
      [82,58,90,1.77,68,33,6],
      [74,49,77,1.46,48,27,7],
      [78,55,80,1.29,59,29,8],
      [267,216,280,4.8,108,64,9],
      [185,127,216,2.52,61,27,10],
      [39,19,38,0.57,31,15,11],
      [41,11,40,0.43,21,7,12],
      [64,38,74,1.04,46,22,13],
      [108,79,120,1.7,75,41,14],
      [108,63,116,1.48,44,26,15],
      [33,6,29,0.34,13,5,16],
      [94,66,110,1.54,62,31,17],
      [186,142,192,3.88,93,79,18],
      [57,31,54,0.96,32,14,19],
      [22,8,17,0.48,23,10,20],
      [39,15,36,0.61,29,13,21],
      [94,69,114,2.08,73,39,22],
      [99,73,110,2.43,76,48,23],
      [31,12,30,0.5,32,16,24],
      [42,27,43,1,53,22,25],
      [154,117,157,3.05,92,58,26],
      [234,185,230,4.09,123,69,27],
      [160,120,186,2.77,91,50,28],
      [134,96,165,2.76,83,41,29],
      [52,24,60,1.03,50,21,30],
      [46,5,49,0.28,10,6,31]
    ];
    export default {
        name: "radar-chart",
        data:function () {
          return {
            options: {
              title: {
                text: '雷达图',
                left: 'center',
                textStyle: {
                  color: '#888'
                }
              },
              legend: {
                bottom: 2,
                data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'],
                itemGap: 20,
                textStyle: {
                  color: '#888',
                  fontSize: 12
                },
                selectedMode: 'multiple'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              radar: {
                indicator: [
                  { name: 'Sales', max: 10000 },
                  { name: 'Administration', max: 20000 },
                  { name: 'Information Techology', max: 20000 },
                  { name: 'Customer Support', max: 20000 },
                  { name: 'Development', max: 20000 },
                  { name: 'Marketing', max: 20000 }
                ],
                shape: 'circle',
                splitNumber: 4,
                name: {
                  show: true,
                  textStyle: {
                    color:'#72ACD1'
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.4)'
                  }
                },
                splitArea: {
                  areaStyle: {
                    color: ['#B8D3E4', '#96C5E3', '#7DB5DA', '#72ACD1']
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#aaa'
                  }
                },

                center: ['50%', '50%'],
                radius: '60%'
              },
              series: [
                {
                  name: 'Allocated Budget',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: [[5000, 7000, 12000, 11000, 15000, 14000]],
                  symbol: 'none',

                  itemStyle: {
                    normal: {
                      color: '#F9713C'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.5
                    }
                  }
                },
                {
                  name: 'Expected Spending',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: [[4000, 9000, 15000, 15000, 13000, 11000]],
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: '#B3E4A1'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.5
                    }
                  }
                },
                {
                  name: 'Actual Spending',
                  type: 'radar',
                  lineStyle: lineStyle,
                  data: [[5500, 11000, 12000, 15000, 12000, 12000]],
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: 'rgb(238, 197, 102)'
                    }
                  },
                  areaStyle: {
                    normal: {
                      opacity: 0.5
                    }
                  }
                }
              ]
            }
          }
        }
    }
</script>

<style lang= "scss" scoped>
  .chart-warper {
    padding: 20px;
    background-color: #fff;

    .chart {
      width: auto;
      height: 300px
    }
  }
</style>
